<template>
	<view class="content">
		<view class="tabList">
			<u-tabs :list="tbList" keyName="dictLabel" @click="changeOrder" lineColor="#3671E9"
				:activeStyle="{ color: '#3671E9' }"></u-tabs>
			<!-- 			<text :class="suo === index?'active':''" @click="changeOrder(index)" v-for="(item,index) in tbList" :key="index">{{item.dictLabel}}</text> -->
		</view>

		<view class="orderList">
			<view class="orderli" v-for="(item,index) in listData" :key="index" @click="goDetail(item)">
				<view class="odTop">
					<view class="odName">
						{{item.serviceType | typeFmt}} <label @click="goDeviceList">{{item.deviceName}}</label>
					</view>
					<view class="odNumber">
						服务单号：<text>{{item.orderNo}}</text>
					</view>
					<view class="odDevice">
						设备名称：{{item.deviceName}}
					</view>
				</view>

				<view class="orderBottom">
					<view class="oderDate">
						预约服务时间：<text>{{item.appointmentTimePeriod}}</text>
					</view>
					<view class="cancelOrder" v-if="item.status == 0 || item.status == 1"
						@click.stop="cancelOrderInfo(item)">
						取消服务
					</view>

					<view class="cancelOrder" style="border-color:rgba(54, 113, 233, 0.6);color:#3671E9;"
						v-if="item.status == 3" @click.stop="pingOrder(item)">
						去评价
					</view>

					<view class="cancelOrder" style="border-color:#D1D1D6;color:#D1D1D6;" @click.stop="goDetail(item)"
						v-if="item.status == 2 || item.status == 5">
						查看详情
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="isAdd" mode="bottom">
			<view class="pingBox">
				<view class="pingTop">
					<text>请对本次服务做出评价</text>
					<view class="closeBtn" @click="isAdd = false"></view>
				</view>

				<view class="pingList">
					<view class="pingli" :class="pingIndex === index?'active':''" @click="changePing(index)"
						v-for="(item,index) in pingList" :key="index">
						<image :src="'../../static/ping'+(index + 1)+'.png'" mode=""></image>
						<text>{{item}}</text>
					</view>
				</view>

				<view class="pingBtn" @click="sumbitForm">
					提交
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getRepairorder,
		getDict,
		cancelOrder,
		updateRating
	} from '@/api/login.js';
	export default {
		data() {
			return {
				isAdd: false,
				suo: 0,
				countPage: '',
				pingIndex: '',
				pingList: ['差', '一般', '满意', '非常满意'],
				tbList: [],
				listData: [],
			    socketTask: null,
			    message: '',
				pingForm: {
					customerRating: '',
					id: ''
				},
				queryItem: {
					pageSize: 10,
					pageNum: 1,
					serviceType: '',
					status: ''
				}
			}
		},
		filters: {
			typeFmt(val) {
				if (val == 0) {
					return '安装'
				} else if (val == 1) {
					return '维修'
				} else if (val == 2) {
					return '保养'
				} else if (val == 3) {
					return '巡检'
				}
			}
		},
		onLoad(opt) {
			// this.connectWebSocket();
			if (opt.idd == 0) {
				this.setTitle('安装订单');
			} else if (opt.idd == 1) {
				this.setTitle('维修订单');
			} else if (opt.idd == 2) {
				this.setTitle('保养订单');
			} else if (opt.idd == 3) {
				this.setTitle('巡检订单');
			}
			this.queryItem.serviceType = opt.idd;
			this.getAllStatus();
		},
		onReachBottom() {
			if (this.queryItem.pageNum < this.countPage) {
				this.queryItem.pageNum++;
				this.getOrderList(1);
			}
		},
		methods: {
			connectWebSocket() {
				console.log('---------------------1234');
				const socketUrl = 'wss://zyw.natappvip.cc/dev-api/websocket/repairorder/' + uni.getStorageSync('userInfo').id; // 确保使用 wss:// 对于安全连接
				this.socketTask = uni.connectSocket({
					url: socketUrl,
					success: () => {
						console.log('WebSocket连接成功');
						this.onSocketMessage(); // 监听消息
					},
					fail: (err) => {
						console.error('WebSocket连接失败', err);
					}
				});
			},
			onSocketMessage() {
				this.socketTask.onMessage((res) => {
					console.log('收到服务器内容：' + res.data);
					this.message = res.data; // 更新数据到视图
				});
			},
			sendSocketMessage() {
				const message = 'Hello, WebSocket!';
				this.socketTask.send({
					data: message,
					success: () => {
						console.log('发送数据成功');
					},
					fail: (err) => {
						console.error('发送数据失败', err);
					}
				});
			},
			closeSocket() {
				this.socketTask.close({
					success: () => {
						console.log('WebSocket已关闭');
					},
					fail: (err) => {
						console.error('关闭WebSocket失败', err);
					}
				});
			},
			goDeviceList() {
				uni.navigateTo({
					url: '/pages/mine/deviceList'
				});
			},
			sumbitForm() {
				if (this.pingForm.customerRating == '') {
					return uni.$u.toast('请选择评价!');
				}
				updateRating(this.pingForm).then(res => {
					if (res.code == 200) {
						uni.$u.toast('操作成功!');
						this.isAdd = false;
						this.getOrderList();
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			changePing(index) {
				this.pingIndex = index;
				// this.pingForm.customerRating = this.pingList[index];
				this.pingForm.customerRating = index + 1;
			},
			// 设置标题
			setTitle(ttt) {
				uni.setNavigationBarTitle({
					title: ttt
				})
			},
			// 评价订单
			pingOrder(val) {
				this.pingForm.id = val.id;
				this.pingIndex = '';
				this.isAdd = true;
			},
			// 切换状态搜索
			changeOrder(val) {
				this.queryItem.status = val.dictValue;
				this.getOrderList();
			},
			goDetail(val) {
				uni.navigateTo({
					url: '/pages/order/detail?idd=' + val.id + '&serviceType=' + val.serviceType
				})
			},
			cancelOrderInfo(val) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消服务？',
					success: res => {
						if (res.confirm) {
							cancelOrder(val.id).then(res => {
								if (res.code == 200) {
									uni.$u.toast('操作成功!');
									this.getOrderList();
								} else {
									uni.$u.toast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getAllStatus() {
				getDict({
					dictType: 'sys_repair_status'
				}).then(res => {
					if (res.code == 200) {
						res.rows.unshift({
							dictValue: '',
							dictLabel: '全部'
						});
						this.tbList = res.rows;
						// this.queryItem.status = res.rows[0].dictValue;
						this.getOrderList();
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			getOrderList(type) {
				getRepairorder(this.queryItem).then(res => {
					if (res.code == 200) {
						this.countPage = Math.ceil(parseInt(res.total) / parseInt(this.queryItem.pageSize));
						if (type != undefined) {
							this.listData = this.listData.concat(res.rows);
						} else {
							this.listData = res.rows;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #F5F5F5;
		padding: 0 24rpx 24rpx;
		min-height: 100vh;

		.pingBox {
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			padding: 42rpx 28rpx 82rpx 22rpx;

			.pingList {
				height: 202rpx;
				background-color: #f5f5f5;
				border-radius: 18rpx;
				@include flx;
				padding: 0 40rpx 0 36rpx;
				justify-content: space-between;
				align-items: center;
				margin: 40rpx 0 58rpx;

				.pingli {
					padding: 20rpx 0;

					image {
						display: block;
						width: 70rpx;
						height: 70rpx;
						margin: 0 auto 20rpx;
					}

					text {
						display: block;
						border: 1px solid #D1D1D6;
						height: 40rpx;
						border-radius: 24rpx;
						text-align: center;
						margin: 0 auto;
					}
				}

				.pingli:nth-of-type(1) {
					text {
						width: 72rpx;
					}
				}

				.pingli:nth-of-type(2),
				.pingli:nth-of-type(3) {
					text {
						width: 96rpx;
					}
				}

				.pingli:nth-of-type(4) {
					text {
						width: 144rpx;
					}
				}

				.active {
					background-color: #fff;
					border-radius: 16rpx;
					width: 184rpx;

					text {
						background-color: #3671E9;
						color: #fff;
					}
				}
			}

			.pingBtn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(90deg, #588FFF 0%, #3671E9 100%);
				text-align: center;
				border-radius: 68rpx;
				@include baseFont(30rpx, #fff, 80rpx);
				font-weight: 500;
			}

			.pingTop {
				position: relative;

				text {
					display: block;
					text-align: center;
					@include baseFont(36rpx, #333, 48rpx);
					font-weight: 500;
				}

				.closeBtn {
					position: absolute;
					right: 0;
					top: 0;
					width: 44rpx;
					height: 44rpx;
					background: url('../../static/guan.png') no-repeat;
					background-size: 44rpx;
				}
			}
		}

		.orderList {
			.orderli {
				background-color: #fff;
				border-radius: 8rpx;
				margin-bottom: 16rpx;

				.odTop {
					padding: 36rpx 32rpx 28rpx 134rpx;
					border-bottom: 1px solid #E7E5E5;
					background: url('../../static/order.png') no-repeat left 32rpx top 36rpx;
					background-size: 78rpx;

					.odName {
						@include baseFont(32rpx, #333, 44rpx);
						font-weight: 500;

						label {
							padding-left: 10rpx;
						}
					}

					.odNumber {
						padding: 8rpx 0;
					}

					.odNumber,
					.odDevice {
						@include baseFont(28rpx, #8D8D8D, 36rpx);
					}
				}

				.orderBottom {
					@include flx;
					justify-content: space-between;
					padding: 16rpx 34rpx 34rpx 32rpx;

					.oderDate {
						@include baseFont(26rpx, #8D8D8D, 52rpx);

						text {
							color: #333;
						}
					}

					.cancelOrder {
						width: 152rpx;
						height: 52rpx;
						border: 1px solid #3671E999;
						border-radius: 6rpx;
						text-align: center;
						@include baseFont(28rpx, #3671E999, 52rpx);
					}
				}
			}
		}

		.tabList {
			// padding:24rpx 0;
			// text{
			// 	display: block;@include baseFont(32rpx,#333,44rpx);padding-bottom:18rpx;position: relative;
			// 	margin-right:20rpx;
			// }
			// .active{
			// 	color:#3671E9;
			// }
			// .active::after{
			// 	content:'';background-color:#3671E9;width:52rpx;height:6rpx;border-radius:3rpx;
			// 	position: absolute;bottom:0;left:50%;transform: translateX(-50%);
			// }
		}
	}
</style>